<template>
  <!--期刊详情-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="wrapper">
      <p class="p1">
        <Icon type="ios-pin"/>
        <span>您现在的位置是:</span><span class="span">卫生期刊</span><span> > </span><span class="span">期刊详情</span>
      </p>
    </div>
    <div class="message">
      <Row :gutter="16">
        <i-col :span="4">
          <div class="cover">
            <img :src="particulars.photo" alt="">
          </div>
          <!--          <div class="contribute">
                      <h3>本站直投</h3>
                      <p>可通过本站上传投稿稿件，由本站绿色通道直达目标期刊，提升投稿速度，提高发表成功率</p>
                      <router-link :to="{path:'Mail_buy',query:{id:id,}}">
                        <Button>本站直投</Button>
                      </router-link>
                    </div>-->
          <!--          <div class="contribute">
                      <h3>期刊公众号</h3>
                      <div class="code">
                        <img src="../../assets/img/u3017.png" alt="">
                      </div>
                    </div>-->
        </i-col>
        <i-col :span="20">
          <div class="basic">
            <p class="p1">基本信息</p>
            <div class="text">
              <p><span class="spn1">中文名称：{{particulars.cname}}</span><span
                class="spn1">外文名称：{{particulars.ename}}</span></p>
              <p><span class="spn1">创刊时间：{{particulars.startTime}}年</span><span class="spn1">出版周期：{{particulars.publicationCycle}}</span>
              </p>
              <p><span class="spn1">复合影响因子：{{particulars.combinedIf}}</span><span class="spn1">期刊级别： {{particulars.level}}</span>
              </p>
              <p><span class="spn1">主管单位：{{particulars.governingBody}}</span><span
                class="spn1">国内刊号：{{particulars.cn}}</span></p>
              <p><span class="spn1">主办单位：{{particulars.sponsor}}</span><span
                class="spn1">国际刊号：{{particulars.issn}}</span></p>
              <p><span class="spn1">编辑单位：{{particulars.editorialOffice}}</span><span class="spn1">邮发代号：{{particulars.postalCode}}</span>
              </p>
              <p><span class="spn1">现任主编：{{particulars.editorInThief}}</span><span class="spn1">编辑部地址：{{particulars.addr}}</span>
              </p>
              <p><span class="spn1">期刊收录：<span style="padding-right: 10px"
                                               v-for="periodicalsDb in particulars.periodicalsDb">{{periodicalsDb.name}}</span></span>
              </p>
              <p><span class="spn1">官网地址: <a target="_blank" :href=" 'http://'+particulars.uri">{{particulars.uri}}</a></span>
              </p>
            </div>
          </div>
          <div class="detail">
            <p class="p1">详细介绍</p>
            <div class="text">
              <p>{{particulars.intro}}</p>
            </div>
          </div>
        </i-col>
      </Row>
    </div>
  </div>

</template>

<script>
  import carousel from '../module/carousel'

  export default {
    components: {
      carousel
    },
    data() {
      return {
        autoplaySpeed: 100000,
        journalDetailsLink: this.$api.url + '/periodicals/selectPeriodicalsById/',
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: "",
          },
        ],
        particulars: '',
        id: '',
      }
    },
    created() {
      this.id = this.$route.query.id;
    },
    mounted() {
      this.dataArray()
    },
    methods: {
      dataArray() {
        this.$axios.get(this.journalDetailsLink + this.id).then((res) => {
          this.particulars = res.data;
        });
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    padding: 10px 20px;
  }

  .wrapper .p1 {
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
  }

  .wrapper .p1 .span {
    padding: 0 20px;
  }

  .message {
    padding: 10px 15px;
  }

  /*左*/
  .message .cover {
    width: 140px;
  }

  .message .cover img {
    width: 100%;
  }

  .message .contribute {
    width: 140px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
  }

  .message .contribute h3 {
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }

  .message .contribute p {
    font-size: 13px;
    padding: 2px;
  }

  .message .contribute .ivu-btn {
    width: 120px;
    background: #ccc;
    color: #000;
  }

  .message .contribute .ivu-btn:hover, .message .contribute .a:hover {
    background: #2b369f;
    color: #fff;
  }

  .message .contribute .code {
    padding-top: 10px;
  }

  .message .contribute .code img {
    width: 100%;
  }

  /*右*/
  .message .basic {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 50px;
  }

  .message .basic .p1 {
    font-size: 18px;
    color: #3366CC;
    display: inline-block;
    font-weight: bold;
    background: #fff;
    padding: 0 10px;
    position: relative;
    top: -23px;
  }

  .message .basic .text p {
    padding-bottom: 10px;
  }

  .message .basic .text .spn1 {
    display: inline-block;
    width: 50%;
    font-size: 14px;
  }

  .message .detail {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .message .detail .p1 {
    font-size: 18px;
    color: #3366CC;
    display: inline-block;
    font-weight: bold;
    background: #fff;
    position: relative;
    top: -23px;
  }

  .message .detail .text p {
    font-size: 14px;
    padding: 0 5px 20px 5px;
  }
</style>
